<template>
  <BasicModal v-bind="$attrs" destroyOnClose title="订单详情" :helpMessage="['订单详情']" :width="modalWidth" :footer="null" @register="registerModal" :destroyOnClose="true">
    <Description size="middle" class="mt-4" title="基本信息" :bordered="false" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="orderInfo.data" :schema="orderInfoSchema" v-if="orderInfo.data" />
    <a-divider />
    <BasicTable @register="registerOrderDetailTable"></BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { h, reactive, ref, unref } from 'vue';
import { render } from '@apps/antd-admin/src/hooks/render/renderUtils';
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { DescItem, Description } from '@apps/antd-admin/src/components/description';
import { BasicColumn, BasicTable, useTable } from '@apps/antd-admin/src/components/table';
import { get } from './api';
import { Tag } from 'ant-design-vue';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';

const { getIsMobile } = useAppInject();
const modalWidth = ref('750px');
if (unref(getIsMobile)) {
  modalWidth.value = '80%';
}
let orderInfo: Recordable = reactive({ data: {} });
const orderStatusTagRender = (color: string) => curVal => {
  const orderStatusArray = [
    { label: '待付款', value: '1' },
    { label: '已付款', value: '2' },
    { label: '已退款', value: '3' },
    { label: '申请退款中', value: '4' },
    { label: '已关闭', value: '5' },
  ];
  const orderStatus: any = orderStatusArray.find(item => item.value == curVal);
  if (orderStatus) {
    return h(Tag, { color }, () => orderStatus.label);
  }
  return '';
};
const payTypeTagRender = (color: string) => curVal => {
  const payTypeArray = [
    { label: '迅联微信', value: 'PAY_WX' },
    { label: '易宝微信', value: 'PAY_WX_YIBAO' },
    { label: '银联微信', value: 'PAY_WX_YINLIAN' },
    { label: '线下', value: 'PAY_UNDERLINE' },
    { label: '公司余额', value: 'PAY_COMPANY_BALANCE' },
    { label: '扫码支付', value: 'PAY_QRCODE' },
  ];
  const payType: any = payTypeArray.find(item => item.value == curVal);
  if (payType) {
    return h(Tag, { color }, () => payType.label);
    return payType.label;
  }
  return '';
};
const orderInfoSchema: DescItem[] = [
  {
    field: 'orderNo',
    label: '订单编号',
    span: 3,
  },
  {
    field: 'mobile',
    label: '用户手机号',
    span: 3,
  },
  {
    field: 'userName',
    label: '用户姓名',
    span: 3,
  },
  {
    field: 'orderStatus',
    label: '订单状态',
    span: 3,
    render: orderStatusTagRender('blue'),
  },
  {
    field: 'payType',
    label: '支付类型',
    span: 3,
    render: payTypeTagRender('green'),
  },
  {
    field: 'employeeName',
    label: '所属销售/公司',
    span: 3,
  },
  {
    field: 'totalPrice',
    label: '订单总金额',
    span: 3,
  },
  {
    field: 'remark',
    label: '备注',
    span: 10,
  },
];
const orderDetailTableSchema: BasicColumn[] = [
  {
    title: '商品名称',
    width: 150,
    dataIndex: 'goodsName',
  },
  {
    title: '商品图片',
    width: 60,
    dataIndex: 'coverImg',
    customRender: render.renderImage,
  },
  {
    title: '金额',
    width: 150,
    dataIndex: 'unitPrice',
  },
  {
    title: '数量',
    width: 150,
    dataIndex: 'buyNum',
  },
];
const [registerOrderDetailTable, { setTableData }] = useTable({
  title: '订单明细',
  columns: orderDetailTableSchema,
  pagination: false,
  showIndexColumn: false,
  scroll: { y: 300 },
  showSummary: false,
});

const [registerModal, { setModalProps }] = useModalInner(async data => {
  let record = data.record;
  get({ orderId: record.orderId, handlerName: 'busOrderDetailHandler' }).then(result => {
    console.info(result);
    orderInfo.data = result;
    setTableData(result.orderDetailList);
  });
});
</script>
